<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const showArea = ref(false)
</script>

<template>
<div class="container">
  <van-nav-bar title="新增收货地址" left-arrow @click-left="router.back()" fixed placeholder/>

  <div class="page-title">收货地址</div>

  <van-form class="form-wrapper" @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="name"
        name="收件人姓名"
        label="收件人姓名"
        placeholder="收件人姓名"
        :rules="[{ required: true, message: '请填写收件人姓名' }]"
      />
      <van-field
        v-model="phone"
        name="联系方式"
        label="联系方式"
        placeholder="联系方式"
        :rules="[{ required: true, message: '请填写收件人联系方式' }]"
      />
      <van-field
        v-model="result"
        is-link
        readonly
        name="area"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
      />
      <van-popup v-model:show="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field
        v-model="detailAddress"
        name="详细地址"
        label="详细地址"
        placeholder="详细地址"
        :rules="[{ required: true, message: '请填写收件人详细地址' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" color="red">
        添加地址
      </van-button>
    </div>
  </van-form>
</div>
</template>

<style scoped lang="less">
.page-title {
  width: 94%;
  margin: 0 auto;
  padding-top: 20px;
  font-size: 14px;
  color: rgba(69, 90, 100, 0.6);
}

</style>

<script>
export default {
  name: 'CreateAddress'
}
</script>
